<template>
  <div class="post-detail-container">
    <div v-if="post" class="post-content">
      <h1>{{ post.title }}</h1>
      <p><strong>话题：</strong> {{ post.topic }}</p>
      <p><strong>作者ID：</strong> {{ post.authorID }}</p>
      <p><strong>发布时间：</strong> {{ formatDate(post.CreatedAt) }}</p>
      <p><strong>更新时间：</strong> {{ formatDate(post.UpdatedAt) }}</p>
      <p><strong>点赞数：</strong> {{ post.likes }}</p>
      <div class="content">
        {{ post.content }}
      </div>
    </div>
    <div v-else class="loading">加载中...</div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import axios from '../axios'
import type { Post } from '../types/Article'

const route = useRoute()
const post = ref<Post | null>(null) 

// 格式化时间
const formatDate = (dateString: string): string => {
  const date = new Date(dateString)
  return date.toLocaleDateString() + ' ' + date.toLocaleTimeString()
}

// 请求详情
const fetchPost = async () => {
  const id = parseInt(route.params.id as string)
  try {
    const response = await axios.get<Post>(`/api/posts/${id}`)
    post.value = response.data
  } catch (error) {
    console.error('获取帖子失败:', error)
  }
}

onMounted(fetchPost)
</script>

<style scoped>
.post-detail-container {
  max-width: 800px;
  margin: 60px auto;
  padding: 30px;
  background-color: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.post-content h1 {
  font-size: 28px;
  margin-bottom: 20px;
  color: #2c3e50;
}

.content {
  line-height: 1.7;
  white-space: pre-wrap;
  color: #333;
}

.loading {
  text-align: center;
  font-size: 18px;
  color: #999;
  margin-top: 100px;
}
</style>